<script type="text/javascript">
	var resultsMap = new Array();
	var currentSelected = -1;
	var currentSelectedType = -1;
	var prevSelected = null;
	var prevSelectedType = -1;
	var draggableFields;

    function leftTrim(sString) {
        while (sString.substring(0,1) == ' ' || sString.substring(0,1) == '\n' || sString.substring(0,1) == '\t') {
            sString = sString.substring(1, sString.length);
        }
        return sString;
    }

    function setSelected(index, type){
	    currentSelectedType = type;
        if(prevSelected){
            if(prevSelectedType == 0){
                prevSelected.css("z-index", "100");
            } else{
                prevSelected.css("z-index", "1");
            }
        }
	    if (type==0){
        	$("#draggable"+index).css("z-index", "9900");
        	currentSelected = index;
        	prevSelected = $("#draggable"+index);
            prevSelectedType = type;
        } else {
            prevSelected = $("#DroppableArea"+index);
            prevSelectedType = type;
            prevSelected.css("z-index", "9900");
            if(resultsMap[index] >= 0){
    		    currentSelected = resultsMap[index];
		    }else {
    		    currentSelected = -1;
		    }
        }
	}
	
	function clearSelection(drag, drop){
		$("#draggable" + drag).draggable("enable");
		$("#draggable" + drag).show();
		resultsMap[drop] = undefined;
		$("#DroppableArea"+ drop).html(" ");
		$("#DroppableArea"+ drop).removeClass("mapped");
	}
		
	function labelDropped(dropDiv, index){
	// index is for the div is being dropped to.
	    if (currentSelected >= 0){
	        if(currentSelectedType == 0){
		        dropDiv.addClass("mapped");
		        dropDiv.html($("#draggable" + currentSelected).html() + "<a class='nomouseover' style='color: red; font-size: .9em; font-family: monospace; cursor:pointer;' onclick='javascript: clearSelection("+ currentSelected +","+ index +");'>&nbsp;x</a>");
		        $("#draggable" + currentSelected).draggable("disable");
		        $("#draggable" + currentSelected).hide();
		        if(resultsMap[index] != undefined){
			        var prev = resultsMap[index];
			        $("#draggable" + prev).draggable("enable");
			        $("#draggable" + prev).show();
		        }
		        resultsMap[index] = currentSelected;
	        } else {
	            dropDiv.addClass("mapped");
	            var n = -1;
	            // n is the index of the div being dragged
	            for(var i = 0; i<resultsMap.length; i++){
	                if(resultsMap[i] == currentSelected){
	                    n = i;
	                }
	            }
	            if (n >= 0){
    		        swap = undefined;
    		        if(resultsMap[index]>=0){
    		            swap = resultsMap[index];
    		            $("#DroppableArea"+ index).html(draggableFields[currentSelected] + "<a class='nomouseover' style='color: red; font-size: .9em; font-family: monospace; cursor:pointer;' onclick='javascript: clearSelection("+ currentSelected +","+ index +");'>&nbsp;x</a>");
    		            $("#DroppableArea"+ n).html(draggableFields[resultsMap[index]] + "<a class='nomouseover' style='color: red; font-size: .9em; font-family: monospace; cursor:pointer;' onclick='javascript: clearSelection("+ resultsMap[index] +","+ n +");'>&nbsp;x</a>");
    		        } else {
        		        $("#DroppableArea"+ n).html(" ");
                        $("#DroppableArea"+ n).removeClass("mapped");
                        dropDiv.html(draggableFields[currentSelected] + "<a class='nomouseover' style='color: red; font-size: .9em; font-family: monospace; cursor:pointer;' onclick='javascript: clearSelection("+ currentSelected +","+ index +");'>&nbsp;x</a>");
    		        }
    		        resultsMap[index] = resultsMap[n];
    		        resultsMap[n] = swap;                  
                } 
	        }
	    }
	}
	
jQuery(document).ready(function($) {
    draggableFields = $('#csvFieldNames').html().split(",");
    
	$(function() {
		var metaJS = '<script type="text/javascript">\n';
		var metaHTML = "";
		for(var i = 0; i < draggableFields.length - 1; i++){
		    if (draggableFields[i] != "date_added" && draggableFields[i] != "created_by" && leftTrim(draggableFields[i]) != "id"){
		       // alert("["+leftTrim(draggableFields[i])+"]");
			    metaJS += '$("#draggable'+i+'").draggable({' +
							    'drag: function(event, ui) { setSelected(' + i +', 0);},' +
							    'cursorAt: {bottom: -2},' +
							    'revert: true'+
						    '});';
			    metaHTML += '<div id="draggable'+ i +'" class="ui-widget-content draggable">' +
							    draggableFields[i] +
						    '</div>';
		    }
		}
		for (var i = 0 ;i < parseInt($("#csvFieldNums").html()); i++){
			metaJS += '$("#DroppableArea'+ i +'").droppable({' +
							'drop: function(event, ui) { labelDropped($(this), '+i+');' + '},' +
							'hoverClass: "highlite"' +
						'});';
		    metaJS += '$("#DroppableArea'+i+'").draggable({' +
	        				'drag: function(event, ui) { setSelected(' + i +', 1);},' +
	        				'cursorAt: {bottom: -2},' +	        				
							'revert: true' +
						'});';
		}
		metaJS += '<\/script>';
		$('#customerFields').html($('#customerFields').html() + metaHTML);
		$('head').append(metaJS);
		
		$('#save1').click(function(){
		    var results = "";
		    for (var i = 0; i < resultsMap.length; i++){
		        if (resultsMap[i] == undefined){
    		        results += "-1,";
		        } else {
		            results += resultsMap[i] + ",";
		        }
            }
            results = results.substring(0,results.length-1);
            $('#fieldorder').val(results);
		});
		
		$('#cancel1').click(function(){
    		window.location = ("" + window.location).substring(0, ("" + window.location).length-17) + "employee";
		});
	});
});
</script>

<% form_tag '/customer/map_csv/' do -%>
    <%= hidden_field_tag 'fieldorder', '1,2,3,4' %>    
    <%= submit_tag "Save", :id=>"save1" %>
    <input type="button" value="Cancel" id="cancel1">
<% end -%>
<div>
    <div id="customerFields">
        <span id="instructions">
        Please label the columns in the csv file you have just uploaded. Drag the name of the field into one
        of the blue rectangles to label a column.
        </span><br />
        <br />
    </div>
</div>
<div>
    <table width="100%">
    <tr>
    <% for i in 0..(@csvdata[0].size - 1) do %>
	    <td>
		    <div id="DroppableArea<%= i %>" class="droppable"></div>
        </td>
    <% end %>
    </tr>

    <% for i in 0..(@csvdata.size - 1) do %>
	    <tr>
	    <% for j in 0..@csvdata[i].size - 1 do %>
		    <td>
		    <%= @csvdata[i][j] %>
		    </td>
	    <% end %>
	    </tr>
    <% end %>
    </table>
</div>

<div style="display: none;">
    <div id="csvFieldNums"><%= @csv_num_cols %></div>
    <div id="csvFieldNames">
    	<% @cust.class.column_names.each do |x| %><%= x %>,<% end %>    
    </div>
</div>
